<script setup lang="ts">
import type { ReportColumnsItem } from '../types'
import WrapComponent from './WrapComponent.vue'
import TableHead from './TableHead.vue'
import ReportPerson from './ReportPerson.vue'
import ContextmenuBox from './ContextmenuBox.vue'

import useArrowKey from './useArrowKey'
import useContextmenu from './useContextmenu'
import useReportCell from './useReportCell'
import useReportRow from './useReportRow'
import useReportSave from './useReportSave'
import useLoadList from './useLoadList'
import useReportInit from './useReportInit'

import { energyMetrologicalReviewApi } from '@/api'

const props = defineProps<{
  dataTime: string
  readonly?: boolean
}>()
const title = ref('主要用能设备一览表')
const columns: ReportColumnsItem[] = [
  { label: '所属部门', prop: 'departmental' },
  { label: '设备名称', prop: 'deviceName' },
  { label: '设备编号', prop: 'deviceNumber' },
  { label: '型号规格', prop: 'deviceModel' },
  { label: '安装地点', prop: 'installationLocation' },
  { label: '用能种类', prop: 'useEnergyType' },
  { label: '能源消耗量或功率', prop: 'devicePower' },
  { label: '备注', prop: 'remarks' },
]
const showLineNumber = ref(true)

const { lists, informant, loading, loadList } = useLoadList(
  columns,
  () =>
    energyMetrologicalReviewApi.selectKeyDevice(
      props.dataTime,
    ),
  props.readonly,
)
const { initInputIndex, inputIndex, clickCallback }
  = useReportCell()
const { left, top, rowIndex, onContextmenu }
  = useContextmenu()
const { delRow, appendRow, prependRow } = useReportRow(
  lists,
  columns,
  rowIndex,
)

const { saveStage } = useReportSave(
  lists,
  informant,
  energyMetrologicalReviewApi.saveOrUpdateKeyDevice,
  {
    dataTime: props.dataTime,
    preProcessData(data: any[]) {
      data.forEach((v) => {
        v.devicePower = +v.devicePower
      })
    },
  },
)

useArrowKey(inputIndex, columns.length)
useReportInit(loadList, initInputIndex)
</script>

<template>
  <WrapComponent>
    <template v-if="$slots.title" #title>
      <slot
        name="title"
        :title="title"
        :save-stage="saveStage"
      />
    </template>
    <div v-loading="loading" class="width-fill height-fill flex-direction flex">
      <div class="report-table-head">
        <table class="report-table">
          <TableHead
            :columns="columns"
            :show-line-number="showLineNumber"
          />
        </table>
      </div>
      <ElScrollbar>
        <table class="report-table" style="height: auto">
          <tbody ref="tbody">
            <tr v-for="(item, i) in lists" :key="item.uuid">
              <th
                v-if="showLineNumber"
                class="readonly width-40px line-number"
              >
                {{ i + 1 }}
              </th>
              <td
                v-for="(d, index) in item.data"
                :key="`${item.uuid}_${index}`"
              >
                <div v-if="!d.editable" class="span-cell">
                  {{ d.value }}
                </div>
                <div v-else class="input-cell">
                  <input
                    v-model="d.value"
                    type="text"
                    @click="clickCallback"
                    @contextmenu="
                      evt => onContextmenu(evt, i)
                    "
                  >
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </ElScrollbar>
      <ContextmenuBox
        :left="left"
        :top="top"
        @del-row="delRow"
        @prepend-row="prependRow"
        @append-row="appendRow"
      />
      <ReportPerson
        v-model="informant"
        :readonly="readonly"
      />
    </div>
  </WrapComponent>
</template>
